<template>
    <a-calendar>
        <ul slot="dateCellRender" slot-scope="value" class="task-calendar-ul">
            <li v-for="item in listData" :key="item.key">
                <a-badge status="default" v-if="item.date.getDate() === value.date() && item.date.getMonth() === value.month() && item.date.getFullYear() === value.year()" :text="item.content" />
            </li>
        </ul>
    </a-calendar>
</template>

<script>
    export default {
        name: "Task",
        data: () => ({
            listData: [
                { key: 1, date: new Date(), content: '负责测试' },
            ]
        }),
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.$emit('route');
            });
        }
    }
</script>

<style scoped>
    .task-calendar-ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
</style>
